<template>
  <zm-view ref="view">
    <zm-arc height="130"></zm-arc>
    <view class="content-wrap z-5">
      <view class="coupon-card">
        <view class="coupon-top flex justify-between p-24 pt-46">
          <view class="flex flex-col">
            <view class="font-30 font-700">{{ coupon.couponName }}</view>
            <view class="flex items-center mt-20">
              <view class="text-999">券密码：{{ coupon.couponId }}</view>
              <view class="copy-btn solid-2" @click="useCopy(coupon.couponId)">复制</view>
            </view>
          </view>
          <view v-if="coupon.isShowExValue !== 0" class="flex flex-col items-center">
            <view class="text-price-mini-before text-price font-50 font-bold text-line-1">{{ showPrice | formatDigit }}</view>
            <view class="mt-10">{{ useRule }}</view>
          </view>
        </view>
        <view class="coupon-bottom text-999 px-26 py-24">
          <view class="border-top"></view>
          <text>{{ coupon.sD | formatDate("YYYY.MM.DD") }}-{{ coupon.eD | formatDate("YYYY.MM.DD") }}</text>
        </view>
      </view>
      <text v-if="coupon.useTip && coupon.useTip.length" class="flex p-24 radius-16 flex font-28 bg-white">{{ coupon.useTip.join(" | ") }} </text>
      <view v-if="coupon.lineType && coupon.lineType.includes('2') && !isInvalid" class="p-24 radius-16 flex items-center justify-between bg-white font-28" @click="qrcodeVisible = true">
        <text>二维码</text>
        <u-icon name="arrow-right" color="#999" size="28rpx" label="查看" label-pos="left" label-size="28rpx" label-color="#999"></u-icon>
      </view>
      <view class="px-24 radius-16 flex flex-col bg-white font-28">
        <view v-if="coupon.exchangeMethod !== '2'" class="flex items-center justify-between py-24" @click="onClickSuitFilm">
          <text>适用影片</text>
          <u-icon name="arrow-right" color="#999" size="28rpx" :label="useFilm" label-pos="left" label-size="28rpx" label-color="#999"></u-icon>
        </view>
        <view class="flex items-center justify-between py-24" @click="onClickSuitCinema">
          <text>适用影院</text>
          <u-icon
            name="arrow-right"
            color="#999"
            size="28rpx"
            :label="`${coupon.useCinema.cityNum}个城市${coupon.useCinema.cinemaNum}家影城可用`"
            label-pos="left"
            label-size="28rpx"
            label-color="#999"
          ></u-icon>
        </view>
      </view>
      <view class="p-24 radius-16 flex flex-col bg-white font-28">
        <text class="font-30 font-700">使用须知</text>
        <text class="text-999 font-26 mt-24">{{ coupon.useExplain }}</text>
      </view>
    </view>
    <!-- 二维码展示 -->
    <zm-popup :show.sync="qrcodeVisible" mode="center" border-radius="16rpx" @open="onQrcodeOpen">
      <view class="qrcode-wrap">
        <zm-qrcode ref="qrcode" :value="coupon.qrCode" :auto="false" :size="185"></zm-qrcode>
        <text class="px-60 font-26 text-999 mt-24 text-center">{{ coupon.qrCodeExplain }}</text>
        <zm-button custom-class="mt-40" type="primary" round width="220rpx" height="70rpx" @click="qrcodeVisible = false">确定</zm-button>
      </view>
    </zm-popup>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
export default {
  mixins: [page, hook],
  data() {
    return {
      couponId: "",
      coupon: { useCinema: {}, exchangeType: [], lineType: [] },
      qrcodeVisible: false
    }
  },
  computed: {
    // 券面展示减免金额
    showPrice() {
      if (this.coupon.discountType == "3") {
        return this.coupon.moneyOffConfig?.reduceMoney
      } else if (this.coupon.couponType == "1") {
        return this.coupon.ticketValue || this.coupon.exValue
      } else {
        return this.coupon.showReduce
      }
    },
    useRule() {
      // couponType 券类型【1】兑换【2】立减
      if (this.coupon.discountType == "3") {
        return `满${this.coupon.moneyOffConfig?.ticketNum}个座位`
      }
      if (this.coupon.couponType == "1") {
        return `最高抵扣`
      } else {
        if (this.coupon.discountType == "1") return "无门槛"
        else return `满${uni.$formatDigit(this.coupon.fullAmount)}元可用`
      }
    },
    useFilm() {
      const useFilm = this.coupon.useFilm || {}
      return useFilm.filmType === "1" ? "全部影片" : useFilm.filmNum + "部影片"
    },
    isInvalid() {
      if (this.coupon.isUse == 1) {
        return true
      } else if (this.coupon.isVoid == 1) {
        return true
      } else if (this.coupon.isFrozen == 1) {
        return true
      } else if (this.coupon.isOver == 1) {
        return true
      } else {
        return false
      }
    }
  },
  onLoad(options) {
    this.couponId = options.couponId
    this.handleGetInfo()
  },
  methods: {
    async handleGetInfo() {
      this.coupon = await uni.$api.coupon.getCouponInfo({ couponId: this.couponId })
    },
    onClickSuitFilm() {
      this.toView({
        url: "pages/person/suit-film/suit-film",
        params: {
          saleOrderNo: this.coupon.saleOrderNo
        }
      })
    },
    // 跳转适用影城
    onClickSuitCinema() {
      this.toView({
        url: "pages/person/suit-cinema/suit-cinema",
        params: {
          lineType: this.coupon.lineType?.join(","),
          saleOrderNo: this.coupon.saleOrderNo,
          type: "coupon"
        }
      })
    },
    onQrcodeOpen() {
      this.$refs.qrcode.makeCode()
    }
  }
}
</script>

<style lang="scss" scoped>
.content-wrap {
  display: grid;
  row-gap: 20rpx;
  padding: 24rpx;
  position: relative;
  grid-template-columns: 1fr;
}
.coupon-card {
  overflow: hidden;
  border-radius: 16rpx;
  .coupon-top {
    position: relative;
    &::before,
    &::after {
      top: 0;
      width: 50%;
      bottom: 0;
      content: "";
      z-index: -1;
      position: absolute;
    }
    &::before {
      left: 0;
      background-image: radial-gradient(circle at left bottom, transparent 14rpx, #fff 14rpx);
    }
    &::after {
      right: 0;
      background-image: radial-gradient(circle at right bottom, transparent 14rpx, #fff 14rpx);
    }
    .copy-btn {
      width: 56rpx;
      height: 30rpx;
      display: flex;
      align-items: center;
      border-radius: 4rpx;
      justify-content: center;
      border-color: #cccccc;
      font-size: 22rpx;
      color: #999999;
      margin-left: 14rpx;
    }
  }
  .coupon-bottom {
    position: relative;
    .border-top {
      top: 0;
      left: 14rpx;
      right: 14rpx;
      position: absolute;
      border-top: 2rpx dashed #eeeeee;
    }

    &::before,
    &::after {
      top: 0;
      width: 50%;
      bottom: 0;
      content: "";
      z-index: -1;
      position: absolute;
    }
    &::before {
      left: 0;
      background-image: radial-gradient(circle at left top, transparent 14rpx, #fff 14rpx);
    }
    &::after {
      right: 0;
      background-image: radial-gradient(circle at right top, transparent 14rpx, #fff 14rpx);
    }
  }
}
.qrcode-wrap {
  width: 560rpx;
  display: flex;
  padding: 56rpx;
  padding-top: 100rpx;
  align-items: center;
  flex-direction: column;
}
</style>
